<!--
 * @Description: 单选组件,v-model绑定值
 * @Author: Zhanghan
 * @Date: 2024-11-11 19:51:11
 * @LastEditTime: 2024-12-05 11:32:54
 * @LastEditors: Zhanghan
-->
<template>
  <div class="radio">
    <div
      v-for="item in option"
      :key="item?.value"
      :class="{ item_radio: true, active: item.value == checked }"
      @click="seletItem(item)"
    >
      {{ item.label }}
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

defineOptions({ name: "ProRadiuSelect" });

const checked = defineModel('checked');

const props = defineProps<{ option: { label: string; value: number }[] }>();

const seletItem = (val: any) => {
  if (checked.value == val.value) {
    checked.value = undefined;
    return;
  }
  checked.value = val.value;
};
</script>

<style scoped lang="less">
@import url("./index.less");
</style>
